<template>
  <div id="tmpl">
  <!-- 实现图片详情和缩略图 -->
    <div id="desc">
    <!-- 头部 -->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        <p>{{photoinfo.add_time| datefmt('YYYY-MM-DD HH:mm:ss')}} {{photoinfo.click}}次浏览</p>
        <p class='line'></p>
      </div>
      <!-- 缩略图 -->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li  v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)"
            >
          </li>
        </ul>
      </div>
      <!-- 摘要 -->
      <p v-html='photoinfo.content'></p>
    </div>
    <!-- 实现评论组件的集成 -->
    <div id="comment">
    <comment :id='id'></comment> 
    </div>
  </div>
</template>
<script>
import common from "../../common/common.js";
import comment from "../subcom/comment.vue";
import {Toast} from "mint-ui";
  export default {
    components:{comment},
    data(){
      return {
        id:0,
        photoinfo:{},
        list:[]
      }
    },
    created(){
      this.id=this.$route.params.id;
      console.log(this.id);
      this.getinfo();
      this.getlist()
    },
    methods:{
      getinfo(){
        var url=common.apidomain+'/api/getimageInfo/'+this.id;
        this.$http.get(url).then(function(res){
          var data=res.body;
          if(data.status!=0){
            Toast(data.message);
            return
          }
          this.photoinfo=data.message[0];
        })
      },
      getlist(){
        var url=common.apidomain+'/api/getthumimages/'+this.id;
        this.$http.get(url).then(function(res){
          var data=res.body;
          if(data.status!=0){
            Toast(data.message);
            return
          }
          data.message.forEach(function(item){
            var img=document.createElement('img');
            img.src=item.src;
            item.h=img.height;
            item.w=img.width;
          });
          this.list=data.message
        })
      }
    }
  }
</script>
<style scoped>
  #desc {
    padding:10px;
  }
  #desc h4 {
    color:#0094ff;
  }
  #desc .title p{
  color:rgba(0,0,0,0.4);
    margin-top: 10px;
  }
  #desc .title .line{
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.4);
  }
  .mui-content,.mui-content ul{
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border-right:0px;
    border-bottom:0px;
  }
  .mui-grid-view.mui-grid-9{
    border-top:0px;
    border-left:0px;
  }
  .mui-content img{
    width: 100px;
    height: 100px;
  }
</style>